<script setup>
import {onMounted, markRaw, ref} from "vue";
import * as echarts from "echarts"
import China from "@/utils/jsonUtils/China.json"
import AMapLoader from '@amap/amap-jsapi-loader';
const chartDomRef = ref(null)

let map;
let loca;
let pl;

onMounted(()=>{
  createRegion();
  initMap();
})

//创建用户地域分布
const createRegion = () => {
  let mapChartInstance = null;
  // 获取地图容器
  let mapChart = chartDomRef.value;
  console.log("mapChart",mapChart)
  mapChartInstance = markRaw(
      echarts.init(mapChart, undefined, { devicePixelRatio: 2, renderer: "svg" })
  );
  echarts.registerMap('China', China);
  mapChartInstance.setOption(
      {
        title: {
          text: '生源地数据',
          subtext: 'www.csu.edu.cn',
          sublink: 'www.csu.edu.cn',
          left: 'right'
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2
        },
        visualMap: {
          left: 'right',
          min: 10,
          max: 788,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          },
          text: ['生源最多', '生源最少'],
          calculable: true
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'left',
          top: 'top',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: '中国各地生源数',
            type: 'map',
            roam: true,
            map: 'China',
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { name: '湖南省', value: 788 },
              { name: '河南省', value: 417 },
              { name: '广西壮族自治区', value: 366 },
              { name: '江西省', value: 342 },
              { name: '广东省', value: 334 },
              { name: '山东省', value: 331 },
              { name: '河北省', value: 322 },
              { name: '安徽省', value: 290 },
              { name: '福建省', value: 268 },
              { name: '贵州省', value: 268 },
              { name: '山西省', value: 267 },
              { name: '甘肃省', value: 249 },
              { name: '湖北省', value: 235 },
              { name: '四川省', value: 214 },
              { name: '陕西省', value: 209 },
              { name: '内蒙古自治区', value: 207 },
              { name: '浙江省', value: 190 },
              { name: '云南省', value: 179 },
              { name: '江苏省', value: 178 },
              { name: '新疆维吾尔自治区', value: 175 },
              { name: '吉林省', value: 142 },
              { name: '辽宁省', value: 134 },
              { name: '黑龙江省', value: 129 },
              { name: '重庆市', value: 123 },
              { name: '宁夏回族自治区', value: 119 },
              { name: '青海省', value: 107 },
              { name: '天津市', value: 93 },
              { name: '海南省', value: 76 },
              { name: '北京市', value: 26 },
              { name: '西藏自治区', value: 21 },
              { name: '上海市', value: 12 },
              { name: '台湾省', value: 10 }
            ]
          }
        ]
      });
};


//初始化地图
const initMap = () => {
AMapLoader.load({
      "key": "536d45bd438bb27608cf0a5021044b49", //申请好的Web端开发者Key，首次调用load时必填
      "version": "2.0",  //指定要加载的JSAPI的版本，缺省时默认为1.4.15
      "plugins": ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      "Loca":{  //是否加载 Loca,缺省不加载
      "version": '2.0.0'  //Loca 版本,缺省1.3.2
      }
      }).then((AMap)=> {
  map = new AMap.Map('container', {
    zoom: 4,
    showLabel: false,
    viewMode: '3D',
    pitch: 55,
    center: [103.594884, 36.964587],
    mapStyle: 'amap://styles/macaron',
  });

  loca = new Loca.Container({
    map: map
  });
  loca.ambLight = {
    intensity: 0.7,
    color: '#7b7bff',
  };
  loca.dirLight = {
    intensity: 0.8,
    color: '#fff',
    target: [0, 0, 0],
    position: [0, -1, 1],
  };
  loca.pointLight = {
    color: 'rgb(240,88,25)',
    position: [112.028276, 31.58538, 2000000],
    intensity: 3,
    // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
    distance: 5000000,
  };

  let featuresDataTest =[
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [106.551556, 29.563009]
            },
            "properties": {
                "id": 1,
                "名称": "重庆市",
                "地址": "重庆市",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 123
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [116.407526, 39.90403]
            },
            "properties": {
                "id": 2,
                "名称": "北京市",
                "地址": "北京市",
                "adcode_n": 100000,
                "adcode_p": 110000,
                "adcode_c": 110000,
                "adcode_d": 110101,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 26
            }
        },
            {
                  "type": "Feature",
                  "geometry": {
                    "type": "Point",
                    "coordinates": [104.066541, 30.572269]
                  },
                  "properties": {
                    "id": 3,
                    "名称": "四川省",
                    "地址": "四川省",
                    "adcode_n": -1,
                    "adcode_p": -1,
                    "adcode_c": -1,
                    "adcode_d": -1,
                    "point_status": 0,
                    "创建时间": "2021-01-27 14:45:12",
                    "修改时间": "2021-01-27 14:45:12",
                    "人数": 214
                  }
            },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [113.264434, 23.129162]
            },
            "properties": {
                "id": 4,
                "名称": "广东省",
                "地址": "广东省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 334
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [120.15507, 30.274084]
            },
            "properties": {
                "id": 5,
                "名称": "浙江省",
                "地址": "浙江省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 190
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [114.305392, 30.593098]
            },
            "properties": {
              "id": 6,
              "名称": "湖北省",
              "地址": "湖北省",
              "adcode_n": -1,
              "adcode_p": -1,
              "adcode_c": -1,
              "adcode_d": -1,
              "point_status": 0,
              "创建时间": "2021-01-27 14:45:12",
              "修改时间": "2021-01-27 14:45:12",
              "人数": 235
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [123.431474, 41.805698]
            },
            "properties": {
                "id": 7,
                "名称": "辽宁省",
                "地址": "辽宁省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 134
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [125.323544, 43.817071]
            },
            "properties": {
                "id": 8,
                "名称": "吉林省",
                "地址": "吉林省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 142
            }
        },
                {
                  "type": "Feature",
                  "geometry": {
                    "type": "Point",
                    "coordinates": [118.796877, 32.060255]
                  },
                  "properties": {
                    "id": 9,
                    "名称": "江苏省",
                    "地址": "江苏省",
                    "adcode_n": -1,
                    "adcode_p": -1,
                    "adcode_c": -1,
                    "adcode_d": -1,
                    "point_status": 0,
                    "创建时间": "2021-01-27 14:45:12",
                    "修改时间": "2021-01-27 14:45:12",
                    "人数": 178
                  }
                },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [108.940174, 34.341568]
            },
            "properties": {
                "id": 10,
                "名称": "陕西省",
                "地址": "陕西省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 209
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [113.625368, 34.746599]
            },
            "properties": {
                "id": 11,
                "名称": "河南省",
                "地址": "河南省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 417
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [112.938814, 28.228209]
            },
            "properties": {
                "id": 12,
                "名称": "湖南省",
                "地址": "湖南省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 788
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [117.119999, 36.651216]
            },
            "properties": {
                "id": 13,
                "名称": "山东省",
                "地址": "山东省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 331
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [121.473701, 31.230416]
            },
            "properties": {
                "id": 2,
                "名称": "上海市",
                "地址": "上海市",
                "adcode_n": 100000,
                "adcode_p": 310000,
                "adcode_c": 310000,
                "adcode_d": 310101,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 12
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [117.200983, 39.084158]
            },
            "properties": {
                "id": 5,
                "名称": "天津市",
                "地址": "天津市",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 93
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [126.534967, 45.803775]
            },
            "properties": {
                "id": 8,
                "名称": "黑龙江省",
                "地址": "黑龙江省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 129
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [114.514859, 38.042306]
            },
            "properties": {
                "id": 12,
                "名称": "河北省",
                "地址": "河北省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 322
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [102.832891, 24.880095]
            },
            "properties": {
                "id": 54,
                "名称": "云南省",
                "地址": "云南省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 179
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [112.548879, 37.87059]
            },
            "properties": {
                "id": 126,
                "名称": "山西省",
                "地址": "山西省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 267
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [87.616848, 43.825592]
            },
            "properties": {
                "id": 176,
                "名称": "新疆维吾尔自治区",
                "地址": "新疆维吾尔自治区",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 175
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [111.74918, 40.842585]
            },
            "properties": {
                "id": 190,
                "名称": "内蒙古自治区",
                "地址": "内蒙古自治区",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 207
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [101.778228, 36.617144]
            },
            "properties": {
                "id": 238,
                "名称": "青海省",
                "地址": "青海省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 107
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [110.198293, 20.044001]
            },
            "properties": {
                "id": 248,
                "名称": "海南省",
                "地址": "海南省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 76
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [106.230909, 38.487193]
            },
            "properties": {
                "id": 253,
                "名称": "宁夏回族自治区",
                "地址": "宁夏回族自治区",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 119
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [91.140856, 29.645554]
            },
            "properties": {
                "id": 318,
                "名称": "西藏自治区",
                "地址": "西藏自治区",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 21
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [103.834303, 36.061089]
            },
            "properties": {
                "id": 146,
                "名称": "甘肃省",
                "地址": "甘肃省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 249
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [106.630153, 26.647661]
            },
            "properties": {
                "id": 120,
                "名称": "贵州省",
                "地址": "贵州省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 268
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [115.858197, 28.682892]
            },
            "properties": {
                "id": 88,
                "名称": "江西省",
                "地址": "江西省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 342
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [117.227239, 31.820586]
            },
            "properties": {
                "id": 67,
                "名称": "安徽省",
                "地址": "安徽省",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 290
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [108.366543, 22.817002]
            },
            "properties": {
                "id": 50,
                "名称": "广西壮族自治区",
                "地址": "广西壮族自治区",
                "adcode_n": -1,
                "adcode_p": -1,
                "adcode_c": -1,
                "adcode_d": -1,
                "point_status": 0,
                "创建时间": "2021-01-27 14:45:12",
                "修改时间": "2021-01-27 14:45:12",
                "人数": 366
            }
        },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [119.296494, 26.074507]
      },
      "properties": {
        "id": 42,
        "名称": "福建省",
        "地址": "福建省",
        "adcode_n": -1,
        "adcode_p": -1,
        "adcode_c": -1,
        "adcode_d": -1,
        "point_status": 0,
        "创建时间": "2021-01-27 14:45:12",
        "修改时间": "2021-01-27 14:45:12",
        "人数": 268
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [114.173355,22.320047]
      },
      "properties": {
        "id": 42,
        "名称": "香港特别行政区",
        "地址": "香港特别行政区",
        "adcode_n": -1,
        "adcode_p": -1,
        "adcode_c": -1,
        "adcode_d": -1,
        "point_status": 0,
        "创建时间": "2021-01-27 14:45:12",
        "修改时间": "2021-01-27 14:45:12",
        "人数": 10
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [113.549088,22.198950]
      },
      "properties": {
        "id": 42,
        "名称": "澳门特别行政区",
        "地址": "澳门特别行政区",
        "adcode_n": -1,
        "adcode_p": -1,
        "adcode_c": -1,
        "adcode_d": -1,
        "point_status": 0,
        "创建时间": "2021-01-27 14:45:12",
        "修改时间": "2021-01-27 14:45:12",
        "人数": 5
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [121.509064,25.044333]
      },
      "properties": {
        "id": 42,
        "名称": "台湾省",
        "地址": "台湾省",
        "adcode_n": -1,
        "adcode_p": -1,
        "adcode_c": -1,
        "adcode_d": -1,
        "point_status": 0,
        "创建时间": "2021-01-27 14:45:12",
        "修改时间": "2021-01-27 14:45:12",
        "人数": 10
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [139.69,35.70]
      },
      "properties": {
        "id": 42,
        "名称": "日本",
        "地址": "日本",
        "adcode_n": -1,
        "adcode_p": -1,
        "adcode_c": -1,
        "adcode_d": -1,
        "point_status": 0,
        "创建时间": "2021-01-27 14:45:12",
        "修改时间": "2021-01-27 14:45:12",
        "人数": 50
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [37.35,55.45]
      },
      "properties": {
        "id": 42,
        "名称": "俄罗斯",
        "地址": "俄罗斯",
        "adcode_n": -1,
        "adcode_p": -1,
        "adcode_c": -1,
        "adcode_d": -1,
        "point_status": 0,
        "创建时间": "2021-01-27 14:45:12",
        "修改时间": "2021-01-27 14:45:12",
        "人数": 175
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [77,28]
      },
      "properties": {
        "id": 42,
        "名称": "印度",
        "地址": "印度",
        "adcode_n": -1,
        "adcode_p": -1,
        "adcode_c": -1,
        "adcode_d": -1,
        "point_status": 0,
        "创建时间": "2021-01-27 14:45:12",
        "修改时间": "2021-01-27 14:45:12",
        "人数": 210
      }
    }
        ]
  const geo = new Loca.GeoJSONSource({
    data: {
      "type": "FeatureCollection",
      "features":featuresDataTest
    }
  });

  // 文字主体图层
  pl = new Loca.PrismLayer({
    zIndex: 10,
    opacity: 1,
    visible: false,
    hasSide: true,
  });

  pl.setSource(geo);
  pl.setStyle({
    unit: 'meter',
    sideNumber: 4,
    topColor: (index, f) => {
      let n = f.properties['人数'];
      return n > 300 ? '#E97091' : '#2852F1';
    },
    sideTopColor: (index, f) => {
      let n = f.properties['人数'];
      return n > 300 ? '#E97091' : '#2852F1';
    },
    sideBottomColor: '#002bb9',
    radius: 20000,
    height: (index, f) => {
      let props = f.properties;
      let height = Math.max(100, Math.sqrt(props['人数']) * 27000 - 50000);
      return height;
    },
    rotation: 360,
    altitude: 0,
  });
  loca.add(pl);
  map.on('complete', function () {
    setTimeout(function () {
      pl.show(500);
      pl.addAnimate({
        key: 'height',
        value: [0, 1],
        duration: 500,
        easing: 'Linear',
        transform: 2000,
        random: true,
        delay: 8000,
      });
      pl.addAnimate({
        key: 'rotation',
        value: [0, 1],
        duration: 500,
        easing: 'Linear',
        transform: 2000,
        random: true,
        delay: 8000,
      });
    }, 800);
  });
  loca.animate.start();

  // const dat = new Loca.Dat();
  // dat.addLayer(pl, '棱柱');
  //
  // dat.addLight(loca.ambLight, loca, '环境光');
  // dat.addLight(loca.dirLight, loca, '平行光');
  // dat.addLight(loca.pointLight, loca, '点光');

  // 事件处理
  const clickInfo = new AMap.Marker({
    anchor: 'bottom-center',
    position: [116.396923, 39.918203, 0],
  });
  clickInfo.setMap(map);
  clickInfo.hide();
  // 鼠标事件
  map.on('mousemove', function (e) {
    const feat = pl.queryFeature(e.pixel.toArray());
    if (feat) {
      clickInfo.show();
      const props = feat.properties;
      const height = Math.max(100, Math.sqrt(props['人数']) * 9000 - 50000);
      clickInfo.setPosition([feat.coordinates[0], feat.coordinates[1], height]);
      clickInfo.setContent(
          '<div style="text-align: center; height: 20px; width: 150px; color:black; font-size: 14px;">' +
          feat.properties['名称'] + ': ' + feat.properties['人数'] +
          ' 人</div>'
      );
    } else {
      clickInfo.hide();
    }
  });
})
}
</script>

<template>
  <div class="main-container animate__animated animate__lightSpeedInLeft">
    <div class="data-box">
      <el-card>
          <div id="user_region" ref="chartDomRef" style="width: 90%;height: 85vh">
          </div>
      </el-card>
    </div>
  </div>
  <div class="main-container animate__animated animate__lightSpeedInLeft" id="container">
  </div>
</template>

<style scoped lang="scss">
#user_region {
  background-color: #fff;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 13px;
}
.view-container{
  padding-top: 20px;
  width: 90%;
  overflow: hidden;
}
.main-container{
  width: 95%;
  height: 100vh;
}
.data-box{
  margin-bottom: 2vh;
  width: 100%;
}
</style>